<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝</title>
	<style>
		.box{
			width: 300px;
			height: 260px;
			border: 3px solid #ff4400;
			overflow: hidden;
			position: relative;
		}
		.box>img{
			position: absolute;
		}
		.box .ad{
			position: absolute;
			right: 0;
			bottom: 0;
		}
		.big{
			float: left;
			width: 248px;
			height: 248px;
		}
		.big img{
			width: 248px;
			float: left;
			display: none;
		}
		.big img.active{
			display: block;
		}
		ul{
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.tiny{
			float: right;
			width: 50px;
		}
		.tiny ul{
			background-color: #999;
			padding: 20px 10px 30px 10px;
		}
		.tiny li{
			width: 30px;
			height: 30px;
			vertical-align: middle;
			opacity: 0.5;
		}
		.tiny li.current{
			opacity: 1;
			box-sizing:border-box;
			border: 1px solid #ff4400;
		}
		.tiny img {
			vertical-align: middle;
		}
	</style>
</head>
<body>
	<div class="all">
		<div class="box">
			<img src="logo.jpg" alt="">
			<div class="big">
				<img src="1.jpg" alt="" class="active">
				<img src="2.jpg" alt="">
				<img src="3.jpg" alt="">
				<img src="4.jpg" alt="">
				<img src="5.jpg" alt="">
				<img src="6.jpg" alt="">
				<img src="7.jpg" alt="">
			</div>
			<div class="tiny">
				<ul>
					<li class="current"><img src="11.jpg" alt=""></li>
					<li><img src="22.jpg" alt=""></li>
					<li><img src="33.jpg" alt=""></li>
					<li><img src="44.jpg" alt=""></li>
					<li><img src="55.jpg" alt=""></li>
					<li><img src="66.jpg" alt=""></li>
					<li><img src="77.jpg" alt=""></li>
				</ul>
			</div>
			<div class="ad">
				<img src="logo-ad.png" alt="">
				<img src="close.png" alt="">
			</div>
		</div>
	</div>
	<script>
		var lis = document.querySelectorAll(".tiny li");
		var imgs = document.querySelectorAll(".big img");
		var ad = document.querySelector(".ad");

		for(var i =0; i<lis.length; i++) {
			lis[i].index = i;
			lis[i].onmouseover = function() {
				for(var i = 0; i<lis.length; i++) {
					lis[i].className = "";
					imgs[i].className = "";
				}
				this.className = "current";
				imgs[this.index].className = "active";
			}
		}

		ad.onclick = function() {
			document.querySelector(".box").innerHTML = "";

		}
	</script>	
</body>
</html>